import React, { memo } from "react";
import { useNavigate } from "react-router-dom";
import { Form, Button, Input, Select } from "antd";

export default function ProtocolSetting() {
  type FieldType = {
    name?: string;
    type?: string;
    content?: string;
  };

  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log(values);
  };

  const onReset = () => {
    form.resetFields();
  };
  return (
    <>
      {new Array(10).fill(1).map((item) => {
        return (
          <Form
            name="basic"
            style={{ maxWidth: "none" }}
            layout="inline"
            autoComplete="off"
            form={form}
            onFinish={onFinish}
            className="grid grid-cols-6 gap-4 my-8"
          >
            <Form.Item<FieldType> name="name">
              <Input placeholder="前进挡激活" />
            </Form.Item>

            <Form.Item<FieldType> name="type">
              <Input placeholder="unsigned char" />
            </Form.Item>

            <Form.Item<FieldType> name="content" className="col-span-3">
              <Input placeholder="0x46" />
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            </Form.Item>
          </Form>
        );
      })}
    </>
  );
}
